<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签布局测试页面</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/ilovefree-migration.css">
    <link rel="stylesheet" href="assets/css/enhanced-layout.css">
    <link rel="stylesheet" href="assets/css/fontawesome-icons.css">
    <style>
        .test-container {
            padding: 20px;
            background: var(--gradient-bg);
            min-height: 100vh;
        }
        .test-section {
            margin: 40px 0;
            padding: 30px;
            background: var(--bg-glass);
            border-radius: var(--radius-lg);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .layout-info {
            background: rgba(3, 150, 255, 0.1);
            border: 1px solid var(--ilovefree-blue);
            padding: 15px;
            border-radius: var(--radius-md);
            margin: 20px 0;
            color: var(--ilovefree-blue);
        }
        .responsive-demo {
            border: 2px dashed rgba(255, 255, 255, 0.3);
            padding: 20px;
            margin: 20px 0;
            border-radius: var(--radius-md);
        }
        .size-indicator {
            position: fixed;
            top: 10px;
            right: 10px;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 10px;
            border-radius: var(--radius-md);
            font-family: monospace;
            z-index: 9999;
        }
    </style>
</head>
<body>
    <div class="size-indicator" id="sizeIndicator">
        屏幕宽度: <span id="screenWidth"></span>px
    

    <div class="test-container">
        <h1 style="text-align: center; color: var(--text-primary); margin-bottom: 40px;">
            🏷️ 分类标题标签布局测试
        </h1>

        <div class="layout-info">
            <h3>📋 测试目标</h3>
            <ul>
                <li>✅ 分类标题在左侧</li>
                <li>✅ 标签列表在同一行右侧</li>
                <li>✅ 标签位置顶到最右侧</li>
                <li>✅ 标签后面显示导航数量</li>
                <li>✅ 响应式布局适配</li>
            </ul>
        

        <div class="test-section">
            <h2>📱 桌面端布局 (>768px)</h2>
            <div class="responsive-demo">
                <div class="category-header">
                    <div class="category-title">
                        <div class="category-icon">
                        <h2 class="category-name">免版权图库 & 免扣素材</h2>
                    
                    <div class="tags-container" id="desktop-test">
                        <span class="tag-label">筛选：</span>
                        <button class="tag-btn active" data-tag-id="0" data-tag-filter="推荐">
                            推荐
                            <span class="tag-count">12</span>
                        </button>
                        <button class="tag-btn" data-tag-id="1" data-tag-filter="综合">
                            综合
                            <span class="tag-count">8</span>
                        </button>
                        <button class="tag-btn" data-tag-id="2" data-tag-filter="风景">
                            风景
                            <span class="tag-count">6</span>
                        </button>
                        <button class="tag-btn" data-tag-id="3" data-tag-filter="人物">
                            人物
                            <span class="tag-count">4</span>
                        </button>
                        <button class="tag-btn" data-tag-id="4" data-tag-filter="美食">
                            美食
                            <span class="tag-count">2</span>
                        </button>
                    
                    <div class="category-line">
                
            
        

        <div class="test-section">
            <h2>📱 平板端布局 (768px-1024px)</h2>
            <div class="responsive-demo">
                <div class="category-header">
                    <div class="category-title">
                        <div class="category-icon">
                        <h2 class="category-name">在线生成酷炫背景</h2>
                    
                    <div class="tags-container" id="tablet-test">
                        <span class="tag-label">筛选：</span>
                        <button class="tag-btn active" data-tag-id="0" data-tag-filter="推荐">
                            推荐
                            <span class="tag-count">3</span>
                        </button>
                        <button class="tag-btn" data-tag-id="1" data-tag-filter="渐变">
                            渐变
                            <span class="tag-count">1</span>
                        </button>
                        <button class="tag-btn" data-tag-id="2" data-tag-filter="图案">
                            图案
                            <span class="tag-count">1</span>
                        </button>
                        <button class="tag-btn" data-tag-id="3" data-tag-filter="SVG">
                            SVG
                            <span class="tag-count">1</span>
                        </button>
                    
                    <div class="category-line">
                
            
        

        <div class="test-section">
            <h2>📱 移动端布局 (<768px)</h2>
            <div class="responsive-demo">
                <div class="category-header">
                    <div class="category-title">
                        <div class="category-icon">
                        <h2 class="category-name">字体资源下载</h2>
                    
                    <div class="tags-container" id="mobile-test">
                        <span class="tag-label">筛选：</span>
                        <button class="tag-btn active" data-tag-id="0" data-tag-filter="推荐">
                            推荐
                            <span class="tag-count">15</span>
                        </button>
                        <button class="tag-btn" data-tag-id="1" data-tag-filter="中文">
                            中文
                            <span class="tag-count">8</span>
                        </button>
                        <button class="tag-btn" data-tag-id="2" data-tag-filter="英文">
                            英文
                            <span class="tag-count">7</span>
                        </button>
                        <button class="tag-btn" data-tag-id="3" data-tag-filter="免费">
                            免费
                            <span class="tag-count">10</span>
                        </button>
                        <button class="tag-btn" data-tag-id="4" data-tag-filter="商用">
                            商用
                            <span class="tag-count">5</span>
                        </button>
                        <button class="tag-btn" data-tag-id="5" data-tag-filter="手写">
                            手写
                            <span class="tag-count">3</span>
                        </button>
                    
                    <div class="category-line">
                
            
        

        <div class="test-section">
            <h2>🎨 实际导航卡片效果</h2>
            <div class="responsive-demo">
                <div class="category-header">
                    <div class="category-title">
                        <div class="category-icon">
                        <h2 class="category-name">设计工具资源</h2>
                    
                    <div class="tags-container" id="interactive-test">
                        <span class="tag-label">筛选：</span>
                        <button class="tag-btn active" data-tag-id="0" data-tag-filter="推荐" onclick="testFilter(this, 0)">
                            推荐
                            <span class="tag-count">8</span>
                        </button>
                        <button class="tag-btn" data-tag-id="1" data-tag-filter="设计" onclick="testFilter(this, 1)">
                            设计
                            <span class="tag-count">5</span>
                        </button>
                        <button class="tag-btn" data-tag-id="2" data-tag-filter="工具" onclick="testFilter(this, 2)">
                            工具
                            <span class="tag-count">6</span>
                        </button>
                        <button class="tag-btn" data-tag-id="3" data-tag-filter="免费" onclick="testFilter(this, 3)">
                            免费
                            <span class="tag-count">4</span>
                        </button>
                    
                    <div class="category-line">
                

                <div class="nav-grid" id="nav-grid-test">
                    <div class="nav-card" data-tag-filters="推荐,设计,工具">
                        
                            <h4>Figma</h4>
                            <p>在线协作设计工具</p>
                            <div class="nav-badge">推荐
                        
                    
                    <div class="nav-card" data-tag-filters="推荐,设计,免费">
                        
                            <h4>Canva</h4>
                            <p>在线图形设计平台</p>
                            <div class="nav-badge">热门
                        
                    
                    <div class="nav-card" data-tag-filters="推荐,工具,免费">
                        
                            <h4>Sketch</h4>
                            <p>数字设计工具</p>
                            <div class="nav-badge">专业
                        
                    
                    <div class="nav-card" data-tag-filters="设计,工具">
                        
                            <h4>Adobe XD</h4>
                            <p>UI/UX设计工具</p>
                            <div class="nav-badge">Adobe
                        
                    
                
            
        
    

    <script>
        // 更新屏幕宽度指示器
        function updateScreenSize() {
            const width = window.innerWidth;
            document.getElementById('screenWidth').textContent = width;
        }

        // 测试标签过滤功能
        function testFilter(element, tagId) {
            // 移除所有active类
            document.querySelectorAll('#interactive-test .tag-btn').forEach(btn => {
                btn.classList.remove('active');
            });

            // 添加active类到点击的按钮
            element.classList.add('active');

            // 过滤卡片
            const cards = document.querySelectorAll('#nav-grid-test .nav-card');
            cards.forEach(card => {
                const filters = card.getAttribute('data-tag-filters').split(',');
                const shouldShow = tagId === 0 || filters.includes(element.getAttribute('data-tag-filter'));

                if (shouldShow) {
                    card.style.display = 'block';
                    card.style.opacity = '1';
                } else {
                    card.style.display = 'none';
                    card.style.opacity = '0';
                }
            });
        }

        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            updateScreenSize();
            window.addEventListener('resize', updateScreenSize);

            console.log('🎨 布局测试页面已加载');
            console.log('📱 当前屏幕宽度:', window.innerWidth + 'px');
        });
    </script>
</body>
</html>